<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>有道人工翻译</title>
    <link rel="shortcut icon" type="image/x-icon" href="https://shared.ydstatic.com/images/favicon.ico" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/rengonfanyi.css" />
    <style>
      p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
      }
    </style>
  </head>
  <body>
    <!-- 最外层功能块 -->
    <div class="main">
      <!-- 导航条 -->
      <div class="head">
        <div class="container">
          <!-- logo -->
          <a href="#"><img src="./img/logo_large.png" alt="" /></a>
          <!-- 标签 -->
          <div class="lianjie">
            <ul>
              <li>
                <a href="#">首页</a>
              </li>
              <li>
                <a href="#">快速翻译</a>
              </li>
              <li class="doc-trans">
                <a href="#">文档翻译</a>
                <span class="pointer"></span>
              </li>
              <li>
                <a href="#">本地化翻译</a>
              </li>
              <li>
                <a href="#">母语润色</a>
              </li>
              <li class="service-statement">
                <a href="#">更多</a>
                <span class="pointer"></span>
              </li>
            </ul>
            <ul class="hide">
              <li>专业论文</li>
              <li>产品介绍</li>
              <li>合同标书</li>
              <li>简历简介</li>
              <li>证件翻译</li>
              <li>留学移民</li>
              <li>创意翻译</li>
              <li>母语润色</li>
            </ul>
            <ul class="hide">
              <li>企业定制</li>
              <li>口译服务</li>
              <li>人工翻译API</li>
              <li>译后编辑</li>
              <li>VIP服务</li>
              <li>查看报价</li>
              <li>了解我们</li>
              <li>加入我们</li>
            </ul>
          </div>
          <!-- 登录 -->
          <div class="dz">
            <div class="li-left">
              <a href="#" id="click">登录 </a>
              <!-- 遮罩层 -->
              <div id="mid" class="hide">
                <!-- 登录框 -->
                <div class="message-contaniner">
                  <div class="box">
                    <a href="" id="a"></a>
                    <div class="content">
                      <!-- 上层 -->
                      <div class="netease">
                        <div class="include">
                          <div id="cnt-box">
                            <!-- 头部 -->
                            <div class="m-header">
                              <div class="header1 border-bottom">网易邮箱帐号登录</div>
                              <span>&nbsp;</span>
                              <div class="header2">网易手机帐号登录</div>
                            </div>
                            <!-- 主体 -->
                            <div class="m-cnt">
                              <div class="dakuan">
                                <!-- 邮箱登录 -->
                                <div class="email">
                                  <!-- 账号 -->
                                  <div class="inputbox">
                                    <div class="u-logo">
                                      <div class="u-logo-img1"></div>
                                    </div>
                                    <div class="u-input">
                                      <input type="text" placeholder="请输入邮箱帐号" />
                                    </div>
                                  </div>
                                  <div class="fur-change-email"></div>
                                  <!-- 密码 -->
                                  <div class="inputbox02">
                                    <div class="u-logo">
                                      <div class="u-logo-img2"></div>
                                    </div>
                                    <div class="u-input">
                                      <input type="text" placeholder="6-16位密码，区分大小写" />
                                    </div>
                                  </div>
                                  <!-- 登录按钮框 -->
                                  <div class="dlan">
                                    <a href="" class="an">登 录</a>
                                  </div>
                                  <!-- 免登录复选框 -->
                                  <div class="m-unlogin">
                                    <div class="b-unlogn">
                                      <span>
                                        <input type="checkbox" />
                                      </span>
                                      <label for="un-login">十天内免登录</label>
                                    </div>
                                    <a href="" class="forgetpwd">忘记密码？</a>
                                    <a href="" class="changepage">去注册</a>
                                  </div>
                                </div>
                                <!-- 手机号登录 -->
                                <div class="phone">
                                  <!-- 输入框 -->
                                  <div class="inputbox">
                                    <div class="mbItlBox">
                                      <div id="mobile-itl-div">
                                        <em>+86</em>
                                      </div>
                                      <input type="tel" placeholder="请输入手机号码">
                                    </div>
                                  </div>
                                  <!-- 滑块 -->
                                  <div class="ckbox ">
                                    <div class="ScapTcha">
                                      <div class="yidun">
                                        <div class="yidun_control">
                                          <div class="yidun_slider">
                                            <span></span>
                                          </div>
                                          <div class="yidun_tips">
                                            <span>向右拖动滑块填充拼图</span>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 验证码 -->
                                  <div class="m-pccnt">
                                    <div class="m-pcbox">
                                      <div class="inputbox ">
                                        <input type="tel" placeholder="请输入验证码">
                                      </div>
                                      <div class="pcbtn ">
                                        <a href="">获取验证码</a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 登录按钮框 -->
                                  <div class="dlan">
                                    <a href="" class="an">登 录</a>
                                  </div>
                                  <!-- 免登录复选框 -->
                                  <div class="m-unlogin">
                                    <div class="b-unlogn">
                                      <span>
                                        <input type="checkbox" />
                                      </span>
                                      <label for="un-login">十天内免登录</label>
                                    </div>
                                    <a href="" class="forgetpwd">忘记密码？</a>
                                    <a href="" class="changepage">去注册</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 最下层 -->
                            <div class="others "></div>
                          </div>
                        </div>
                      </div>
                      <!-- 下层 -->
                      <div class="others">
                        <h2>使用第三方登录</h2>
                        <div class="third-login">
                          <a href="" class="item1"></a>
                          <a href="" class="item2"></a>
                          <a href="" class="item3"></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="li-left">
              <a href="#">注册</a>
            </div>
            <ul id="mineMenu" class="hide">
              <li class="trans-minename">
                <div class="account-item" title="" data-username="${userId}"></div>
              </li>
              <li class="mine-info"><a class="clog-js" data-act="click-my-tradingrecord" href="/user.s?method=userChargeResult">我的账户</a></li>
              <li class="mine-info"><a class="clog-js" data-act="click-my-information" href="/user.s?method=getUserInfo">联系方式</a></li>
              <li class="mine-info"><a class="clog-js" data-act="click-my-bill" href="/userBill.do?method=applyBill">申请发票</a></li>
              <li class=""><a class="clog-js" data-act="click-logout" href="logout.do">退出</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 第一层 -->
      <div class="col1">
        <!-- 优惠券 -->
        <div class="youhui">
          <div class="box">
            <div class="money">20<span>元</span></div>
            <div class="condition">
              <p class="condition-1">20元优惠券<br /><span class="condition-2">满40元可用</span></p>
            </div>
            <div class="state">
              <a href="#">领取</a>
            </div>
          </div>
          <div class="box">
            <div class="money">30<span>元</span></div>
            <div class="condition">
              <p class="condition-1">30元优惠券<br /><span class="condition-2">满100元可用</span></p>
            </div>
            <div class="state">
              <a href="#">领取</a>
            </div>
          </div>
          <div class="box">
            <div class="money">50<span>元</span></div>
            <div class="condition">
              <p class="condition-1">50元优惠券<br /><span class="condition-2">满200元可用</span></p>
            </div>
            <div class="state">
              <a href="#">领取</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二层 -->
      <div class="col2">
        <!-- 版心 -->
        <div class="conter">
          <!-- 左边 -->
          <div class="lf">活动规则</div>
          <!-- 右边 -->
          <div class="rg">
            <ol>
              <li>新用户可领取专享100元大礼包，包含满40元减20元、满100元减30元、满200元减50元券各一张，每人每张限领一次，可在我的账户中查看。</li>
              <li>可与其他优惠活动叠加，但每笔订单仅限使用一张优惠券。</li>
              <li>新用户指未成功在有道人工翻译支付并完成订单的用户。</li>
              <li>新人优惠券有效期为30天，自领取之日起开始计算。</li>
              <li>本活动解释权归有道人工翻译所有。</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- 第三层 -->
      <div class="col3">
        <!-- 版心 -->
        <div class="conter">
          <!-- 上层 -->
          <div class="sc">
            <p class="wenben">丰富的翻译类型</p>
            <p class="line"></p>
          </div>
          <!-- 下层 -->
          <div class="xc">
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-01.png" alt="" />
              </div>
              <div class="item-title">专业论文</div>
              <div class="item-desc">匹配对口领域的资深专家级译员，适用于论文投稿发表等重要场合</div>
            </div>
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-02.png" alt="" />
              </div>
              <div class="item-title">公司产品介绍</div>
              <div class="item-desc">助力企业海外推广和市场拓展，用信、达、雅的翻译彰显企业品牌实力</div>
            </div>
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-03.png" alt="" />
              </div>
              <div class="item-title">简历简介</div>
              <div class="item-desc">丰富的英文简历制作经验，专业地道的求职外语表达，让您的简历脱颖而出</div>
            </div>
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-04.png" alt="" />
              </div>
              <div class="item-title">本地化翻译</div>
              <div class="item-desc">全球50+国家和地区的译员团队，多年本地化翻译经验，祝您开拓国际市场</div>
            </div>
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-05.png" alt="" />
              </div>
              <div class="item-title">母语润色服务</div>
              <div class="item-desc">针对国际论文发表的需要，母语专家润色涵盖1117门学科，超过900位专家团队</div>
            </div>
            <div class="item">
              <div class="item-icon">
                <img src="./img/tubiao-06.png" alt="" />
              </div>
              <div class="item-title">更多</div>
              <div class="item-desc">我们还提供法律合同标书翻译、漫画翻译、视频翻译、电商翻译、创意翻译等</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第四层 -->
      <div class="col4">
        <!-- 标题 -->
        <div class="desc">
          <p class="title">多领域翻译</p>
          <p class="line"></p>
        </div>
        <!-- 列表项 -->
        <div class="content">
          <div class="item">
            <img src="./img/bio-01.png" alt="" />
            <span class="item-title">生物医学</span>
          </div>
          <div class="item ml">
            <img src="./img/bio-02.png" alt="" />
            <span class="item-title">经济贸易</span>
          </div>
          <div class="item ml">
            <img src="./img/bio-03.png" alt="" />
            <span class="item-title">法律法规</span>
          </div>
          <div class="item ml">
            <img src="./img/bio-04.png" alt="" />
            <span class="item-title">人文艺术</span>
          </div>
          <div class="item mt">
            <img src="./img/bio-05.png" alt="" />
            <span class="item-title">机械电子</span>
          </div>
          <div class="item ml mt">
            <img src="./img/bio-06.png" alt="" />
            <span class="item-title">建筑工程</span>
          </div>
          <div class="item ml mt">
            <img src="./img/bio-07.png" alt="" />
            <span class="item-title">IT科技</span>
          </div>
          <div class="item ml mt">
            <img src="./img/bio-08.png" alt="" />
            <span class="item-title">更多领域</span>
          </div>
        </div>
      </div>
      <!-- 第五层 -->
      <div class="col5">
        <!-- 上层 -->
        <div class="desc1">
          <p class="title">多语言翻译</p>
          <p class="line"></p>
        </div>
        <!-- 下层 -->
        <div class="desc2">
          <div class="item">
            <div class="item-icon cn"></div>
            <div class="item-title">中文</div>
          </div>
          <div class="item ml">
            <div class="item-icon en"></div>
            <div class="item-title">英文</div>
          </div>
          <div class="item ml">
            <div class="item-icon jp"></div>
            <div class="item-title">日文</div>
          </div>
          <div class="item ml">
            <div class="item-icon france"></div>
            <div class="item-title">法文</div>
          </div>
          <div class="item ml">
            <div class="item-icon korea"></div>
            <div class="item-title">韩文</div>
          </div>
          <div class="item ml">
            <div class="item-icon russia"></div>
            <div class="item-title">俄文</div>
          </div>
          <div class="item ml">
            <div class="item-icon indonesia"></div>
            <div class="item-title">印尼文</div>
          </div>
          <div class="item ml">
            <div class="item-icon thailand"></div>
            <div class="item-title">泰文</div>
          </div>
          <div class="item mt">
            <div class="item-icon german"></div>
            <div class="item-title">德文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon portugal"></div>
            <div class="item-title">葡萄牙文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon italy"></div>
            <div class="item-title">意大利文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon spain"></div>
            <div class="item-title">西班牙文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon arab"></div>
            <div class="item-title">阿拉伯文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon netherland"></div>
            <div class="item-title">荷兰文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon india"></div>
            <div class="item-title">印地文</div>
          </div>
          <div class="item ml mt">
            <div class="item-icon morelang"></div>
            <div class="item-title">更多</div>
          </div>
        </div>
      </div>
      <!-- 页脚 -->
      <div class="foot">
        <p>
          <a href="#">有道翻译</a>| <a href="#">有道首页</a>| <a href="#">有道精品课</a>| <a href="#">关于有道</a>| <a href="#">官方博客</a>| <a href="#">有道智选</a>|
          <a href="#">有道人工翻译服务条款</a>| <a href="#">隐私条例</a>| <a href="#">网上有害信息举报（涉未成年人） </a>|
          <a href="#">加入我们</a>
        </p>
        <p>
          <span>©2022</span>
          <span>网易公司</span>
          <span>京ICP证080268号</span>
        </p>
      </div>
      <script>
        //遮罩层
        document.getElementById("click").onclick = function () {
          console.log(1);
          mid.classList.remove("hide");
        };

        const lify = document.querySelector(".lianjie>ul>.doc-trans");
        console.log(lify);
        lify.onmouseover = function () {
          const ul2 = document.querySelector(".lianjie>ul:nth-child(2)");
          ul2.classList.remove("hide");
        };
        lify.onmouseout = function () {
          const ul2 = document.querySelector(".lianjie>ul:nth-child(2)");
          ul2.classList.add("hide");
        };

        const ligd = document.querySelector(".lianjie>ul>.service-statement");
        console.log(ligd);
        ligd.onmouseover = function () {
          const ul3 = document.querySelector(".lianjie>ul:nth-child(3)");
          ul3.classList.remove("hide");
        };
        ligd.onmouseout = function () {
          const ul3 = document.querySelector(".lianjie>ul:nth-child(3)");
          ul3.classList.add("hide");
        };

        //////////登录框切换
        document.querySelector("#cnt-box .m-header .header1").onclick =function (){
          document.querySelector(".dakuan").classList.remove("active")
          this.classList.add("border-bottom")
          document.querySelector("#cnt-box .m-header .header2").classList.remove("border-bottom")
        }
        document.querySelector("#cnt-box .m-header .header2").onclick =function (){
          document.querySelector(".dakuan").classList.add("active")
          this.classList.add("border-bottom")
          document.querySelector("#cnt-box .m-header .header1").classList.remove("border-bottom")
        }
      </script>
    </div>
  </body>
</html>
